<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Table</title>
  <style type="text/css" media="screen">
    body {
      margin: 1px;
      padding: 5px;
    }

    table {
      border: 2px solid #000;
    }

    th, td {
      border: 1px solid #000;
      width: 100px;
      height: 100px;
    }

    #marker {
      position: absolute;
      border: 2px solid #000;
      width: 50px;
      height: 50px;
      background: #ccc;
    }
  </style>
  <script type="text/javascript" src="../dist/jsTemplate.js"></script>
  <script type="text/javascript">

    function parseTxt() {
      var template1 = document.getElementById("txtTemplate").value;
      document.getElementById("adiv").innerHTML = jsTemplate.parseTxt(template1);
    }


    var books = {books:[
      {name:"Pro JavaScript Design Patterns",price:100,authors:[{name:"Ross Harmes"},{name:"Dustin Diaz"}]},
      {name:"JavaScript: The Good Parts",price:19.2,authors:[{name:"Douglas Crockford"}]},
      {name:"Java编程思想（第4版）",price:108,authors:[{name:"（美）埃克尔"}]},
      {name:"梦断代码",price:49,authors:[{name:"Scott Rosenberg"}]},
      {name:"JavaScript王者归来",price:86,authors:[{name:"月影"}]}
    ]
    };
    function getAuthors(authors) {
      var authorName = "";
      for ( var i = 0; i < authors.length; i++) {
        authorName += authors[i].name + ",";
      }
      return  authorName.substring(0, authorName.length - 1);
    }
  </script>
</head>

<body>
<button id="doit" onclick="parseTxt()">Do It</button>

<div id="adiv">

</div>

<textarea id="txtTemplate" style="display:none">
  <table>
    <tr>
      <th>Book Name</th>
      <th>Price</th>
      <th>Author</th>
    </tr>
    <% for(bookIndex in books.books) {%>
    <tr>
      <td><%=books.books[bookIndex].name%></td>
      <td align="right"><%=books.books[bookIndex].price%></td>
      <td nowrap><%=getAuthors(books.books[bookIndex].authors)%></td>
    </tr>
    <% }%>
  </table>
</textarea>

<pre>
  javaScript:

  function parseTxt() {
    var template1 = document.getElementById("txtTemplate").value;
    document.getElementById("adiv").innerHTML = jsTemplate.parseTxt(template1);
  }


  template:

  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Book Name&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
      &lt;th&gt;Author&lt;/th&gt;
    &lt;/tr&gt;
    &lt;% for(bookIndex in books.books) {%&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;%=books.books[bookIndex].name%&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;%=books.books[bookIndex].price%&gt;&lt;/td&gt;
      &lt;td nowrap&gt;&lt;%=getAuthors(books.books[bookIndex].authors)%&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;% }%&gt;
  &lt;/table&gt;
</pre>

</body>
</html>

